<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Item - Inputs</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Item inputs</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding-vertical">
        <form onsubmit="return onSubmit(event)">
          <ion-list class="basic">
            <ion-item>
              <ion-label>Simple item</ion-label>
            </ion-item>

            <ion-item id="item" button onclick="testClick(event)">
              <ion-label>Item Button</ion-label>
            </ion-item>

            <ion-item>
              <ion-label>DateTime</ion-label>
              <ion-datetime
                name="date"
                id="datetime"
                min="1994-03-14"
                max="2017-12-09"
                display-format="MM/DD/YYYY"
              ></ion-datetime>
            </ion-item>

            <ion-item>
              <ion-label>Select</ion-label>
              <ion-select name="select" id="select" value="n64">
                <ion-select-option value="">No Game Console</ion-select-option>
                <ion-select-option value="nes">NES</ion-select-option>
                <ion-select-option value="n64">Nintendo64</ion-select-option>
                <ion-select-option value="ps">PlayStation</ion-select-option>
                <ion-select-option value="genesis">Sega Genesis</ion-select-option>
                <ion-select-option value="saturn">Sega Saturn</ion-select-option>
                <ion-select-option value="snes">SNES</ion-select-option>
              </ion-select>
            </ion-item>

            <ion-item>
              <ion-label>Toggle</ion-label>
              <ion-toggle name="toggle" id="toggle" name="Actually" slot="end"></ion-toggle>
            </ion-item>

            <ion-item>
              <ion-label>Input (text)</ion-label>
              <ion-input name="input" id="text"></ion-input>
            </ion-item>

            <ion-item>
              <ion-label>Input (placeholder)</ion-label>
              <ion-input name="input2" id="placeholder" placeholder="Placeholder"></ion-input>
            </ion-item>

            <ion-item>
              <ion-label>Checkbox</ion-label>
              <ion-checkbox name="checkbox" id="checkbox" slot="start"></ion-checkbox>
            </ion-item>

            <ion-item>
              <ion-label>Range</ion-label>
              <ion-range name="range" id="range" value="10"></ion-range>
            </ion-item>
          </ion-list>

          <ion-button id="submit" type="submit">Submit</ion-button>
          <p id="form-result"></p>
        </form>

        <ion-list>
          <ion-list-header>
            <ion-label> Controls </ion-label>
          </ion-list-header>
          <ion-item-divider>Value Controls</ion-item-divider>

          <ion-item button onClick="toggleDisabled()" id="btnDisabled"> Toggle Disable </ion-item>
          <ion-item button onClick="setSomeValue()" id="btnSomeValue"> Set some value </ion-item>
          <ion-item button onClick="setEmptyValue()" id="btnEmptyValue"> Set empty value </ion-item>
          <ion-item button onClick="setNullValue()" id="btnNullValue"> Set "null" value </ion-item>
          <ion-item button onClick="setUndefinedValue()" id="btnUndefinedValue"> Set "undefined" value </ion-item>
          <ion-item-divider>Label Controls</ion-item-divider>
          <ion-item button onClick="setLabelDefault()" id="btnLabelDefault"> Default </ion-item>
          <ion-item button onClick="setLabelFloating()" id="btnLabelFloating"> Floating </ion-item>
          <ion-item button onClick="setLabelStacked()" id="btnLabelStacked"> Stacked </ion-item>
          <ion-item button onClick="setLabelFixed()" id="btnLabelFixed"> Fixed </ion-item>
        </ion-list>

        <ion-list-header>
          <ion-label> Multiple inputs/clickables </ion-label>
        </ion-list-header>
        <ion-list class="multiple">
          <ion-item id="delayedInputItem">
            <ion-label>Delayed input</ion-label>
          </ion-item>

          <ion-item>
            <ion-label>Multiple inputs</ion-label>
            <ion-input placeholder="Input 1"></ion-input>
            <ion-input placeholder="Input 2"></ion-input>
            <ion-input placeholder="Input 3"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label>Multiple textareas</ion-label>
            <ion-textarea placeholder="Textarea 1"></ion-textarea>
            <ion-textarea placeholder="Textarea 2"></ion-textarea>
            <ion-textarea placeholder="Textarea 3"></ion-textarea>
          </ion-item>

          <ion-item>
            <ion-label>Multiple input/textareas</ion-label>
            <ion-textarea placeholder="Textarea 1"></ion-textarea>
            <ion-input placeholder="Input 2"></ion-input>
            <ion-textarea placeholder="Textarea 3"></ion-textarea>
          </ion-item>

          <ion-item>
            <ion-checkbox slot="start" id="checkbox-start"></ion-checkbox>
            <ion-label>Multiple inputs w/ cover</ion-label>
            <ion-datetime placeholder="startTime" display-format="HH:mm" id="datetime-end"></ion-datetime>
            <ion-checkbox slot="end" id="checkbox-end"></ion-checkbox>
          </ion-item>

          <ion-item>
            <ion-select slot="start" placeholder="month" id="select-start">
              <ion-select-option value="1">January</ion-select-option>
              <ion-select-option value="2">February</ion-select-option>
              <ion-select-option value="3">March</ion-select-option>
            </ion-select>
            <ion-label>Input w/ clickable</ion-label>
            <ion-button slot="end" id="button-end" onclick="setButtonColorRed()">Button</ion-button>
          </ion-item>

          <ion-item>
            <ion-radio slot="start" id="radio-start"></ion-radio>
            <ion-label>Input w/ cover + input</ion-label>
            <ion-range value="45" id="range-end"></ion-range>
          </ion-item>

          <ion-item>
            <ion-range value="60" id="range-start"></ion-range>
            <ion-label>Multiple inputs w/o cover</ion-label>
            <ion-toggle id="toggle-1-end"></ion-toggle>
            <ion-toggle id="toggle-2-end"></ion-toggle>
          </ion-item>

          <ion-item button id="clickableItem">
            <ion-label>Clickable item</ion-label>
            <ion-checkbox slot="end"></ion-checkbox>
          </ion-item>

          <ion-item>
            <ion-checkbox slot="start"></ion-checkbox>
            <ion-label>Checkbox w/ disabled button</ion-label>
            <ion-button slot="end" onclick="setButtonColorRed()" disabled>Button</ion-button>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-app>

    <script>
      var ids = ['item', 'datetime', 'select', 'toggle', 'text', 'placeholder', 'checkbox', 'toggle', 'range'];
      var isDisabled = false;

      const clickableItem = document.querySelector('#clickableItem');

      clickableItem.addEventListener('click', function () {
        console.log('Clicked item', clickableItem);
        const color = clickableItem.color;
        clickableItem.color = color === undefined ? 'primary' : undefined;
      });

      const delayedInputItem = document.querySelector('#delayedInputItem');
      const delayedInput = document.createElement('ion-input');
      delayedInput.type = 'number';
      delayedInput.value = 34;

      setTimeout(() => {
        delayedInputItem.appendChild(delayedInput);
      }, 3000);

      const inputs = document.querySelectorAll('ion-input, ion-textarea');

      for (var i = 0; i < inputs.length; i++) {
        const input = inputs[i];

        input.addEventListener('ionBlur', function () {
          console.log('Listen ionBlur: fired');
        });

        input.addEventListener('ionFocus', function () {
          console.log('Listen ionFocus: fired');
        });
      }

      function toggleDisabled() {
        isDisabled = !isDisabled;
        Object.values(getInputs()).forEach((el) => (el.disabled = isDisabled));
      }

      function setSomeValue() {
        const { datetime, select, toggle, text, placeholder, checkbox, range } = getInputs();
        text.value = placeholder.value = 'Some text';
        toggle.checked = checkbox.checked = true;
        datetime.value = '2016-12-09';
        range.value = 20;
        select.value = 'nes';
      }

      function setEmptyValue() {
        const { datetime, select, text, placeholder, range } = getInputs();
        text.value = placeholder.value = '';
        datetime.value = '';
        range.value = 0;
        select.value = '';
      }

      function setNullValue() {
        Object.values(getInputs()).forEach((el) => (el.value = null));
        const { toggle, checkbox } = getInputs();
        toggle.checked = checkbox.checked = false;
      }

      function setUndefinedValue() {
        Object.values(getInputs()).forEach((el) => (el.value = undefined));
        const { toggle, checkbox } = getInputs();
        toggle.checked = checkbox.checked = false;
      }

      function setLabelDefault() {
        setLabelPosition(undefined);
      }

      function setLabelFixed() {
        setLabelPosition('fixed');
      }

      function setLabelFloating() {
        setLabelPosition('floating');
      }

      function setLabelStacked() {
        setLabelPosition('stacked');
      }

      function setLabelPosition(position) {
        Array.from(document.querySelectorAll('ion-list.basic ion-label')).forEach(
          (label) => (label.position = position)
        );
      }

      function getInputs() {
        const elements = {};
        for (var i = 0; i < ids.length; i++) {
          elements[ids[i]] = document.getElementById(ids[i]);
        }
        return elements;
      }

      function testClick(ev) {
        console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim());
      }

      function onSubmit(ev) {
        const data = new FormData(ev.target);
        const json = {};
        data.forEach((value, key) => {
          json[key] = value;
        });
        document.getElementById('form-result').textContent = JSON.stringify(json);
        return false;
      }

      function setButtonColorRed() {
        const button = document.getElementById('button-end');
        button.style.setProperty('--background', '#ff0000');
      }
    </script>
  </body>
</html>
